<template>
	<view class="carProItem">
		<view class="left">
			<view class="pic">
				<image class="img" :src="item.thumb" mode="aspectFill"></image>
			</view>
			<view class="txt">
				<view class="tt">
					{{item.name}}
				</view>
				<view class="sku" v-if="false">
					10包/巴拉巴拉
				</view>
				<view class="price">
					<view class="big">
						￥{{item.price}}
					</view>
					<view class="small">
						￥{{item.before_price}}
					</view>
				</view>
			</view>
		</view>
		<view class="right">
			<pro-num-box :item="item"></pro-num-box>
		</view>
	</view>
</template>

<script>
	export default {
		name:"car-pro-item",
		data() {
			return {
				
			};
		},
		props:{
			item:{
				type:Object,
				defaultValue:()=>{
					return {}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.carProItem{ padding: 20rpx 0; position: relative; border-bottom: 1px solid $border-color-light;
		.left{ @include flex-box-set(start);
			.pic{ width: 130rpx; height: 130rpx; flex-shrink: 0;
				.img{ width: 100%; height:100%;}
			}
			.txt{  flex-wrap: 1; padding-left: 20rpx; width: 400rpx;
				.tt{ font-size: 28rpx; color:$text-font-color1; @include ellipsis();}
				.sku{ font-size: 22rpx; color:#999; margin: 10rpx 0;}
				.price{ @include flex-box-set(start);
					.big{ font-size: 32rpx; color:$brand-theme-color; font-weight: bold;}
					.small{ font-size: 28rpx; color:$text-font-color3; text-decoration: line-through;}
				}
			}
		}
		.right{ position: absolute; right:0; bottom: 20rpx;}
	}
</style>
